<template>
  <el-dialog
    title="个人设置"
    :visible.sync="dialogVisible"
    :show="show"
    width="30%"
    :before-close="handleClose"
    @close="$emit('update:show', false)"
  >

    <div class="app-container">
      <el-form ref="elFormSetting" :model="formSettingData" :rules="rules" size="medium" label-width="120px">

        <el-form-item label="请输入原密码" prop="old_pass">
          <el-input
            v-model="formSettingData.old_pass"
            show-password
            placeholder="请输入原密码"
            clearable
            :style="{width:'100%'}"
          />
        </el-form-item>
        <el-form-item label="请输入新密码" prop="new_pass">
          <el-input
            v-model="formSettingData.new_pass"
            show-password
            placeholder="请输入新密码"
            clearable
            :style="{width:'100%'}"
          />
        </el-form-item>
        <el-form-item label="再输入新密码" prop="dbl_pass">
          <el-input
            v-model="formSettingData.dbl_pass"
            show-password
            placeholder="再输入新密码"
            clearable
            :style="{width:'100%'}"
          />
        </el-form-item>
      </el-form>
    </div>

    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submitForm">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { changePass } from '@/api/admin'

export default {
  props: {
    show: Boolean,
    userInfo: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      dialogVisible: false,
      formSettingData: {
        old_pass: undefined,
        new_pass: undefined,
        dbl_pass: undefined
      },
      rules: {
        old_pass: [
          { required: true, message: '旧密码不能为空', trigger: 'change' }
        ],
        new_pass: [
          { required: true, message: '新密码不能为空', trigger: 'change' }
        ],
        dbl_pass: [
          { required: true, message: '重复输入新密码', trigger: 'change' }
        ]
      }
    }
  },
  watch: {
    show() {
      this.dialogVisible = this.show
    }
  },
  methods: {
    handleClose(done) {
      done()
    },
    submitForm() {
      this.$refs['elFormSetting'].validate(valid => {
        if (valid) {
          this.loading = true
          changePass(this.formSettingData).then((ret) => {
            this.$notify({
              title: '操作提示',
              message: ret.message
            })
            this.loading = false
            this.dialogVisible = false
          }).catch((err) => {
            console.error(err)
            this.loading = false
          })
        }
      })
    },
    resetForm() {
      this.$refs['elFormSetting'].resetFields()
    }
  }
}
</script>
